import React, { Component } from 'react';
import { Input, Button, List } from 'antd';
import store from './store';

import { changeInputAction } from './store/actionCreators';

const data = [
    '已首都机场南京财经',
    '及飒飒超级好吃计算机'
]

class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = store.getState()
        console.log(store);
        this.changeInputValue = this.changeInputValue.bind(this)
        this.addBtn = this.addBtn.bind(this)
        this.storeChange = this.storeChange.bind(this)
        store.subscribe(this.storeChange) // 订阅redux，只要仓库里面的数据发生变化，就会重新获取数据
    }
    render() {
        return (
            <div >
                <div style={{ margin: '10px' }}>
                    <div><Input placeholder={this.state.inputValue} style={{ width: '250px', marginRight: '10px' }} 
                    onChange={this.changeInputValue}
                    />
                        <Button type='primary' onClick={this.addBtn}>增加</Button>
                    </div>
                </div>
                <div style={{ margin: '10px', width: '300px' }}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item, index) => (
                            <List.Item onClick={this.deleteItem.bind(this, index)}>
                                {item}
                            </List.Item>
                        )}
                    />
                </div>
            </div>

        );
    }

    changeInputValue(e) {
        // console.log(e);
        const action = changeInputAction(e.target.value)
        store.dispatch(action) // 让store知道你要干嘛
    }
    addBtn() {
        const action = {
            type: 'add_item'
        }
        store.dispatch(action)
    }
    storeChange() {
        this.setState(store.getState())
    }
    deleteItem(index) {
        // console.log(index);
        const action = {
            type: 'delete_item',
            value: index
        }
        store.dispatch(action)
    }
}

export default TodoList;